Intro
Nord Carousel
The Nord Carousel is an accessible and native-built carousel with no external dependencies!
Main Features:
- Keyboard navigation
- Autoplay/slideshow
- Auto-stop slideshow on mouse hover
Demo
Landscapes
Misty Mountains
Radiant Lake
Snowy Peaks
Important Note:
For now, the carousel component does not have a set height.
Please assign a height that fits your slide content!
Components
carousel
ATTRIBUTES
REQUIRED:
- slide-count
Type: Number
Set the number of slides in the carousel.
OPTIONAL:
- autoplay
Type: Boolean | Default: False
Set this to true to enable slideshow/autoplay.
- autoplay-timer-ms
Type: Number | Default: 2500
Slideshow timer in milliseconds.
- nav-btn-position
Type: Number (Percentage) | Default: 50%
Controls the position of the prev/next buttons.
- hide-nav-buttons
Type: Boolean | Default: False
Set this to true to hide prev/next buttons.
Setting this to true automatically enables autoplay.
pagination-margin
Default: 1rem
Controls the top margin for the pagination dots.
- hide-pagination
Type: Boolean | Default: False
Set to true to hide pagination dots.SLOTS
left-btn and right-btn
Use these to set custom prev/next buttons.
default
Use this slot for the 'slide' component.
slide
ATTRIBUTES
REQUIRED:
- index
Type: Number
Set the index of the slide.